import { useState } from "react";
import { Button, Space } from "antd";
import type { ReactNode } from "react";
import { useLayout } from "./useLayout";
import { LayoutContext } from "../contexts/LayoutContext";

// 定义布局类型
type LayoutType = "horizontal" | "vertical";

// 定义上下文类型并导出
export type LayoutContextType = {
  layoutType: LayoutType;
  toggleLayout: () => void;
};

// 创建提供者组件
export function LayoutProvider({ children }: { children: ReactNode }) {
  const [layoutType, setLayoutType] = useState<LayoutType>("horizontal");

  const toggleLayout = () => {
    setLayoutType((prev) => (prev === "horizontal" ? "vertical" : "horizontal"));
  };

  return (
    <LayoutContext.Provider value={{ layoutType, toggleLayout }}>
      {children}
    </LayoutContext.Provider>
  );
}

// 设置组件
export default function Settings() {
  const { layoutType, toggleLayout } = useLayout();

  return (
    <Space>
      <span>当前布局: {layoutType === "horizontal" ? "水平" : "垂直"}</span>
      <Button onClick={toggleLayout} size="small">
        切换布局
      </Button>
    </Space>
  );
}